<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="showStore">显示仓库内容</button>
    <!-- <h1>{{this.$store.state.counter}}</h1> -->
    <h1>{{counter}}</h1>
    <button @click="add">加1</button>
  </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 1.引入 vuex 依赖 -->
<script src="./node_modules/vuex/dist/vuex.js"></script>
<script>

  console.log(Vuex);
  // 2. 创建仓库
  let store = new Vuex.Store({
    // 仓库中的数据
    state:{
      counter:888
    },
    // 改变值的操作
    mutations:{ 
      increment:function(state){
        state.counter+=1;
      }
    }
  })
  // Vue.use(Vuex);
  let vm = new Vue({
    // 3.配置仓库
    store,
    // computed:{
    //   counter:function(){
    //     return this.$store.state.counter;
    //   }
    // },
    // computed: Vuex.mapState(["counter"]),
    computed:{
      totalPrice:function(){},
      ...Vuex.mapState(["counter"])
    },
    el:"#app",
    methods:{
      showStore:function(){
        console.log(this.$store);
      },
      add:function(){
        //this.$store.state.counter += 1; // 直接修改 不推荐
        // 提交commit 修改数据
        this.$store.commit("increment")
      }
    }
  })



</script>
</html>